<template>
  <view class="pay-method-container">
    <view class="title">选择支付方式</view>

    <!-- 授信额度支付 -->
    <view class="pay-item" v-for="item in payList" :key="item.code" @click="selectPayMethod(item.id)">
      <view class="pay-icon">
       <text :class="`icon icon-${item.code}`"></text>
      </view>
      <view class="pay-info">
        <text class="pay-name">{{item.name}}</text>
        <text class="pay-desc">可用额度: ¥{{item.enableAmount}}</text>
      </view>
	    <text class="pay-radio" :class="paymentMethod === item.id?'icon-2xuanzhong' :'icon-yuanquan'"></text>
      <!-- <radio class="pay-radio" :checked="paymentMethod === item.id" /> -->
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type {pay} from '@/types'

const props = defineProps<{
	payList:pay[],
	paymentMethod:number
}>()

const emit = defineEmits(['update:paymentMethod'])

const selectPayMethod = (id: number) => {
  emit('update:paymentMethod', id)
}
</script>

<style scoped>
.pay-method-container {
  padding: 20rpx;
  background-color: #fff;
}
.icon-WechatPay{
	    color: #4CAF50;
	    font-size: 60rpx;
}
.icon-BalanceAccount{
	color: #13227a;
	font-size: 60rpx;
	
}
.icon-CreditAccount{
	color: #4057dc;
	font-size: 60rpx;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.pay-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.pay-icon {
  width: 60rpx;
  height: 60rpx;
  margin-right: 20rpx;
}

.pay-icon image {
  width: 100%;
  height: 100%;
}

.pay-info {
  flex: 1;
}

.pay-name {
  font-size: 28rpx;
  margin-bottom: 5rpx;
  display: block;
}

.pay-desc {
  font-size: 24rpx;
  color: #666;
}

.pay-radio {
  /* transform: scale(0.8); */
  color: #999;
  font-size:40rpx;
}
</style>